
<template>
  <div class="yl-container">
    <div class="yl-main">
      <!-- 搜索 -->
      <div class="yl-search-list">
        <el-form :model="searchConfig" ref="searchConfig" :inline="true">

           <el-form-item label="系别">
            <el-select v-model="searchConfig.department" placeholder="请选择系别" size="small">
              <el-option
                v-for="(item, index) in departments"
                :key="index"
                :value="item.label"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="申报人">
            <el-select v-model="searchConfig.uploader_id" placeholder="请选择申报人" size="small">
              <el-option
                v-for="(item, index) in users"
                :key="index"
                :value="item.nns_account"
                :label="item.nns_name + '-' + item.nns_department"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="审核状态">
            <el-select v-model="searchConfig.audit_state" placeholder="请选择审核状态" size="small">
              <el-option
                v-for="(item, index) in states"
                :key="index"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="报单/回执单编号">
            <el-input v-model="searchConfig.code" placeholder="报单/回执单编号" type="text" size="small"/>
          </el-form-item>

          <el-form-item>
            <YlButton uiType="default" icon="el-icon-search" @click="handleSearch">搜 索</YlButton>
            <YlButton uiType="default" btnType="success" icon="iconfont yl-ecs-zhongzhi yl-icon" @click="resetSearch">重 置</YlButton>
          </el-form-item>
        </el-form>
      </div>

      <!-- table 列表组 -->
      <div class="yl-table-list">
        <el-table
          v-loading="loading"
          element-loading-text="玩命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          border
          style="width: 100%"
          :data="tableData"
        >
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center"  label="报单信息" >

            <el-table-column align="center"  label="报单类型" >
              <template slot-scope="{row}">
                {{ row.bill_category_is_special | formatBillKind}}
              </template>
            </el-table-column>

            <el-table-column align="center"  label="单类名称" prop="bill_category_name" show-overflow-tooltip />

            <el-table-column align="center"  label="报单编号" show-overflow-tooltip  >
              <template slot-scope="{row}">
                {{ row.bill_category_symbol + '-' + row.bill_category_num }}
              </template>
            </el-table-column>

            <el-table-column align="center"  label="摘要" prop="bill_summary" show-overflow-tooltip />

            <el-table-column align="center"  label="发生金额(元)"  >
              <template slot-scope="{row}">
                {{ row.bill_amount_money | formatMoney('yuan')}}
              </template>
            </el-table-column>

            <el-table-column align="center"  label="实际发生金额(元)"  width="150" >
              <template slot-scope="{row}">
                {{ row.bill_actual_amount_money | formatMoney('yuan')}}
              </template>
            </el-table-column>

          </el-table-column>

          <el-table-column align="center"  label="回执单信息" >

            <el-table-column align="center"  label="报单编号" show-overflow-tooltip  >
              <template slot-scope="{row}">
                {{ row.receipt_category_symbol + '-' + row.receipt_category_num }}
              </template>
            </el-table-column>

            <el-table-column align="center"  label="摘要" prop="receipt_summary" show-overflow-tooltip />

            <el-table-column align="center"  label="审核状态" prop="nns_create_time">
              <template slot-scope="{row}">
                <span :style="formatAuditState(row.receipt_state, 'style')">{{formatAuditState(row.receipt_state, 'field')}}</span>
              </template>
            </el-table-column>

          </el-table-column>

          <el-table-column width="300" label="操作" fixed="right">
            <template slot-scope="{row}">
               <!--需要回执的-->

                <YlButton uiType="main" icon="iconfont yl-ecs-bianji yl-icon" v-show="row.receipt_state == '2'" @click="showCheckBill(row.bill_id, false)">审核</YlButton>

              <!--特殊报单-->
              <YlButton uiType="main" icon="iconfont yl-ecs-bianji yl-icon" v-if="row.bill_category_is_special === 1">查看</YlButton>
              <!--普通报单查看-->
              <YlButton uiType="main" icon="iconfont yl-ecs-bianji yl-icon" v-if="row.receipt_state == 3 || row.receipt_state == 4" @click="showCheckBill(row.bill_id, true)">查看</YlButton>

            </template>
          </el-table-column>
          <div class="yl-table-empty" slot="empty">
            <img src="~@/assets/icons/svg/no-data.svg">
            <div>暂无数据</div>
          </div>
        </el-table>
        <!-- 分页模块 -->
        <YlPage
          :size="size"
          :page="page"
          :total="total"
          @page-size="handlePageSize"
          @current-page="handleCurrentPage"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  initSelectValue
} from '@/middleware'
export default {
  data () {
    return {
      // 轮播框
      loading: false,
      // 列表数据
      tableData: [],
      // 搜索框
      searchConfig: {
        stage_id: '',
        department: '',
        code: '',
        uploader_id: '',
        audit_state: ''
      },
      // 系别列表
      departments: [],
      users: [],
      // 状态
      states: [
        {
          label: '待审核',
          value: '2'
        },
        {
          label: '通过',
          value: '3'
        },
        {
          label: '驳回',
          value: '4'
        }
      ],
      // 审核状态配置
      stateConfig: {
        not_submit: {
          style: {
            color: '#909399' // info
          },
          field: '待提交'
        },
        wait_audit: {
          style: {
            color: '#E6A23C' // info
          },
          field: '待审核'
        },
        passed: {
          style: {
            color: '#67C23A' // info
          },
          field: '通过'
        },
        rejected: {
          style: {
            color: '#F56C6C' // info
          },
          field: '驳回'
        }
      },
      // 分页
      page: 1,
      size: 10,
      total: 0,
      dialogFormVisible: false,
      changeId: '',
      query: ''
    }
  },
  created () {
    this.loading = true
    this.query = this.$route.query
    this.searchConfig.stage_id = this.query.id
    this.initTable()
  },
  methods: {
    // 初始化数据
    async initData (page_size = this.size, page = this.page) {
      let data = await this.$ylapi.getAuditListExecuteStageReceiptAudit({
        page_size,
        page,
        ...this.searchConfig
      })
      this.loading = false
      this.page = data.page
      this.total = data.total
      this.tableData = data.list
    },
    // 初始化列表
    initTable () {
      this.searchConfig = this.initForm(this.searchConfig, ['stage_id', 'mx_id'])
      this.loading = true
      this.initData(10, 1)
    },

    async initDepartment () {
      let data = await this.$ylapi.getDepartList()
      data = initSelectValue(data)
      this.departments = data
    },

    async initUploader () {
      let data = await this.$ylapi.getUserListSelect()
      this.users = data
    },
    // 搜索
    handleSearch () {
      this.loading = true
      this.initData(10, 1)
    },
    // 重置搜索
    resetSearch () { this.initTable() },
    // 编辑回显
    handleShowSingle ({ nns_id, nns_name }) {
    },
    // 删除
    async handledelete (id) {
      // eslint-disable-next-line no-unused-expressions
      await this.$modal.confirm(this, {
        api: this.$ylapi.deleteDepart,
        obj: id
      })
        ? this.initTable()
        : ''
    },
    // 分页---页容量选择器
    handlePageSize (val) {
      this.size = val
      this.loading = true
      this.initData()
    },
    // 分页
    handleCurrentPage (val) {
      this.page = val
      this.loading = true
      this.initData()
    },
    // 初始化
    getInitState (val) {
      if (val) {
        this.initTable()
      }
    },
    // 审核
    showCheckBill (id, isShow) {
      this.$router.push(`/executeStage/receiptWrite/normal/check/show/${id}/${isShow}/${this.query.id}`)
    },
    // 关闭弹窗
    getCloseDialog (val) { this.dialogFormVisible = val }
  },
  computed: {
    formatAuditState () {
      return function (state, type) {
        let stateField = ''
        switch (state) {
          case 1:
            stateField = 'not_submit'
            break
          case 2:
            stateField = 'wait_audit'
            break
          case 3:
            stateField = 'passed'
            break
          case 4:
            stateField = 'rejected'
            break
          default:
            return ''
        }
        if (!this.stateConfig[stateField][type]) {
          return ''
        }

        return this.stateConfig[stateField][type]
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
